<script setup lang="ts">
import { createSession, getMessageList, sendMessage } from '@/api/message';
import { MessageList, Session } from '@/api/message/type';
import YIcon from '@/components/YIcon.vue';
import { Ref, ref } from 'vue';
const userId = defineModel("userId") as Ref<string>;
const session = defineModel("session") as Ref<Session>;
const emit = defineEmits(['send']);
const isSend = ref(false);
const msg = ref('');
const clear = (_event: MouseEvent) => {
    msg.value = '';
}
const send = async () => {
    if (session.value.id === undefined && session.value.receiverId !== undefined) {
        const res = await createSession(session.value);
        session.value = res.data as Session;
    }
    await sendMessage(session.value.id, userId.value, msg.value);
    msg.value = '';
    emit('send');
}
</script>

<template>
    <div class="container-bottom">
        <div class="content">
            <van-field class="input" v-model="msg" placeholder="请输入你要发送的内容" 
                @focus="isSend = true" @blur="isSend = false" :clearable="true" @clear="clear"/>
            <div class="buttom" v-if="msg.length === 0">
                <YIcon name="biaoqing" :size="32"></YIcon>
                <YIcon name="tianjia" :size="32"></YIcon>
            </div>
            <div class="buttom" v-else>
                <van-button style="width: 100%;" type="primary" @click="send">发送</van-button>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container-bottom {
    height: 55px;
    .content {
        height: 100%;
        display: flex;
        align-items: center;
        border-top: 1px rgba(97, 94, 94, 0.144) solid;
        .input {
            justify-content: center;
            margin: 3%;
            border-radius: 15px;
            width: 70%;
        }
        .buttom {
            width: 22%;
            border-radius: 15px;
            display: flex;
            justify-content: space-around;
            margin-right: 2%;
        }
    }
}
</style>